<script setup lang="ts">
import { computed, shallowRef, watch } from 'vue'
import { $t } from '@/locales'
import { authRouteWithRole, fetchGetAllPages, fetchGetMenuTree, fetchRoleRoutes } from '@/service/api'

defineOptions({
  name: 'MenuAuthModal'
})

interface Props {
  /** the roleId */
  roleId: string
}

const props = defineProps<Props>()

const visible = defineModel<boolean>('visible', {
  default: false
})

function closeModal() {
  visible.value = false
}

const title = computed(() => $t('common.edit') + $t('page.manage.role.menuAuth'))

const home = shallowRef('')

async function getHome() {
  console.log(props.roleId)

  home.value = 'home'
}

async function updateHome(val: string) {
  // request

  home.value = val
}

const pages = shallowRef<string[]>([])

async function getPages() {
  const { error, data } = await fetchGetAllPages()

  if (!error) {
    pages.value = data
  }
}

const pageSelectOptions = computed(() => {
  const opts: CommonType.Option[] = pages.value.map(page => ({
    label: page,
    value: page
  }))

  return opts
})

const tree = shallowRef<Api.SystemManage.MenuTree[]>([])

async function getTree() {
  const { error, data } = await fetchGetMenuTree()

  if (!error) {
    tree.value = data
  }
}

const checks = shallowRef<number[]>([])

async function getChecks() {
  const { error, data } = await fetchRoleRoutes(props.roleId)
  if (!error) {
    checks.value = data
  }
  // request
}

async function handleSubmit() {
  const { error } = await authRouteWithRole(props.roleId, checks.value)
  if (error) {
    return
  }

  window.$message?.success?.($t('common.modifySuccess'))

  closeModal()
}

function init() {
  getHome()
  getPages()
  getTree()
  getChecks()
}

watch(visible, val => {
  if (val) {
    init()
  }
})
</script>

<template>
  <NModal v-model:show="visible" :title="title" preset="card" class="w-480px">
    <div class="flex-y-center gap-16px pb-12px">
      <div>{{ $t('page.manage.menu.home') }}</div>
      <NSelect :value="home" :options="pageSelectOptions" size="small" class="w-160px" @update:value="updateHome" />
    </div>
    <NTree
      v-model:checked-keys="checks"
      :data="tree"
      key-field="id"
      label-field="menuName"
      checkable
      expand-on-click
      virtual-scroll
      block-line
      class="h-280px"
    />
    <template #footer>
      <NSpace justify="end">
        <NButton size="small" class="mt-16px" @click="closeModal">
          {{ $t('common.cancel') }}
        </NButton>
        <NButton type="primary" size="small" class="mt-16px" @click="handleSubmit">
          {{ $t('common.confirm') }}
        </NButton>
      </NSpace>
    </template>
  </NModal>
</template>

<style scoped></style>
